<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>热门图片</title>
    <link rel="icon" href="images/拉黑小怪兽.png">
    <link rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/justifiedGallery/3.7.0/css/justifiedGallery.min.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script
        src="https://cdnjs.cloudflare.com/ajax/libs/justifiedGallery/3.7.0/js/jquery.justifiedGallery.min.js"></script>

    <script type="application/x-javascript">
		addEventListener("load", function () {
			setTimeout(hideURLbar, 0);
		}, false);

		function hideURLbar() {
			window.scrollTo(0, 1);
		}
	</script>
    <link href="css/bootstrap.css" rel='stylesheet' type='text/css' />
    <link href="css/style.css" rel='stylesheet' />
    <link href="css/font-awesome.css" rel="stylesheet">
    <link href="css/button.css" rel='stylesheet' type='text/css' />
    <link href="css/daohang.css" rel='stylesheet' type='text/css' />
    <link href="http://fonts.googleapis.com/css?family=Merriweather+Sans:300,300i,400,400i,700,700i,800"
        rel="stylesheet">
    <link href="http://fonts.googleapis.com/css?family=Mallanna" rel="stylesheet">
    <style>
        .sticky {
            position: -webkit-sticky;
            position: sticky;
            top: 0;
            z-index: 9999998;
            min-width: 1000px;
        }

        /* 添加一个CSS类来实现水平翻转 */
        .flip-horizontal {
            transform: scaleY(-1);
            filter: FlipH;
            /* 兼容IE */
            transition: transform 0.5s ease;
        }

        .yes {
            display: block;
        }

        .cd-search {
            z-index: 99999999;
            width: 60%;
            top: 100%;
            left: 38%;
            border-radius: 25px;
        }

        .cd-search input {
            border-radius: 25px;
        }

        .hid .variety {
            position: absolute;
            z-index: 9999999;
            left: 280px;
            top: 65px;
            font-size: 20px;
            min-width: 50px;
            min-height: 32px;
            text-align: left;
            white-space: normal;
            background-color: #fff;
            border: gray solid;
            border-radius: 5px;
            border-width: 1px;
        }

        .hid-arrow:after {
            content: " ";
            top: 55px;
            left: 300px;
            margin-left: -10px;
            border-bottom-color: gray !important;
            border-top-width: 0 !important;
            border-width: 10px;
            position: absolute;
            display: block;
            width: 0;
            height: 0;
            border-color: transparent;
            border-style: solid;
        }

        .daohang2-font {
            color: black;
        }

        #daohang-faxian {
            cursor: pointer;
        }

        .photograph {
            box-sizing: border-box;
            background-color: #f7f8fa;
            margin: 0;
            border: 0;
            padding: 20px 40px 20px 40px;
            display: block;
        }

        .photo-prin {
            min-height: 300px;
            display: flex;
            flex-wrap: wrap;
        }

        .photo-box {
            height: 320px;
            position: relative;
            left: 10px;
            right: 10px;
            padding: 10px;
        }

        /*图片高度为300px*/

        .photo-box img {
            height: 300px;
        }

        .top-bar_sub_w3layouts_agile {
            border-top: 0.01cm solid #000;
        }
    </style>

</head>

<body>

    <div class="top-bar_sub_w3layouts_agile" style="height: 80px;border-bottom: 1px;border: #000;min-width: 1000px">
        <ul class="_ul_ daohangpos">
            <li class=" _need_popover" style=" position: absolute; left: 200px; top: 25px;">
                <a class="daohang_font" id="daohang-faxian" href="shouyeno.html">首页
                </a>
                <!-- 			<a id="text" href="javascript:void(0)" class=" daohang_font">更多
				<img id="image" style="position: absolute;left:50px;top:12px;text-decoration: none;"
					class="down_arrow hide_on_small" src="//cdn-uat.500px.me/images/svg/down_arrow.svg" alt="">
			</a> -->
                <a href="remenno.html" class="daohang_font">热门</a>
                <a href="xinzuono.html" class="daohang_font">新作</a>
            </li>
        </ul>
        <script>
            var hid = document.getElementById("hid");
            var fx = document.getElementById("daohang-faxian");
            var im = document.getElementById("daohang-img");
            var flag = 0;
            fx.onclick = function () {
                if (flag == 0) {
                    im.src = "images/scroll-top.png";
                    hid.style.display = "block";
                    flag = 1;
                } else {
                    im.src = "images/down.png";
                    hid.style.display = "none";
                    flag = 0;
                }
            }
        </script>
        <!-- 		<div id="caidan" class="fangkuang">
			<a href="buluo.html" class="daohang_font" style="position: absolute;left:12px;">部落</a>
			<a href="buluo.html" class="daohang_font" style="position: absolute;left:12px;top:40px;">活动</a>
		</div> -->
        <!-- 		<script src="js/daohang.js"></script> -->
        <div class="search">
            <div class="right" style="right: 90px;">
                <h1><a style="position: absolute;left: 30px;top:20px;color:black;" href="shouyeno.html">Photo
                        Go</a></h1>
                <h5>
                    <a style="position: absolute;right:200px;top:25px;padding: 2px 20px;text-align: center;"
                        class="sign signup " href="login.html">登录</a>
                    <a style="position: absolute;right:80px;top:25px;padding: 2px 20px;text-align: center;"
                        class="sign signup " href="signup.html">注册</a>
                </h5>
            </div>

            <div class="cd-main-header">
                <ul class="cd-header-buttons">
                    <li><a class="cd-search-trigger" href="#cd-search"
                            style="position: absolute;right: 10px;top: 35px;">
                            <span></span></a></li>
                </ul>
                <!-- cd-header-buttons -->
            </div>
            <div id="cd-search" class="cd-search searchstyle">
                <form action="#" method="post">
                    <input name="Search" type="search" placeholder="搜索作品">
                </form>
            </div>
        </div>
        <div class="clearfix"> </div>
    </div>
    <div class="photograph">
        <div id="my-gallery" class="justified-gallery"></div>
    </div>

    <script>
        var re = [];
        $.ajax({
            async: false,
            method: 'get',
            url: 'http://localhost:7777/article/newArticleList',
            //url: 'http://www.baidu.com',
            contentType: 'application/json;charset=UTF-8',
            success: function (result) {
                re = result['data'];
                console.log(re)
            },
        })
        var len = re.length;
        $(document).ready(function () {
            // 假设后端提供的图片URL列表是一个JSON数组
            /*var imageUrls = [
            "https://alifei02.cfp.cn/creative/vcg/800/new/VCG211459373948.jpg",
              "https://pic.quanjing.com/pm/zr/QJ6921303411.jpg@!794ws",
              "https://pic.quanjing.com/pm/zr/QJ6921303411.jpg@!794ws",
              "https://pic.quanjing.com/pm/zr/QJ6921303411.jpg@!794ws",
              "https://pic.quanjing.com/pm/zr/QJ6921303411.jpg@!794ws",
              "https://pic.quanjing.com/pm/zr/QJ6921303411.jpg@!794ws"
            ];*/
            var imageUrls = [];
            for (var i = 0; i < len; i++) {
                imageUrls[i] = re[i]["photo"];
            }
            // 将图片URL动态添加到Justified-Gallery中
            var gallery = $("#my-gallery");
            var j = 0;
            $.each(imageUrls, function (index, imageUrl) {
                var imd = re[j]["id"];
                gallery.append('<a href="image.html?id=' + imd + '" data-lightbox="my-gallery"><img src="' + imageUrl + '" alt="Image ' + (index + 1) + '" id="' + imd + '"></a>');
                j++;
            });

            // 初始化Justified-Gallery
            gallery.justifiedGallery({
                rowHeight: 250,
                margins: 5,
                maxRowHeight: 200,
                maxRowHeightPremium: 200,
                lastRow: 'justify',
                captions: false,
                randomize: false
            });
        });
    </script>
    <script src="js/main.js"></script>
    <script src="js/responsiveslides.min.js"></script>
    <script>
        $(function () {
            $("#slider4").responsiveSlides({
                auto: true,
                pager: true,
                nav: false,
                speed: 1000,
                namespace: "callbacks",
                before: function () {
                    $('.events').append("<li>before event fired.</li>");
                },
                after: function () {
                    $('.events').append("<li>after event fired.</li>");
                }
            });
        });
    </script>


</body>

</html>